<template>
  <div>
    <div class="to-center" id="to-center">
        <div class="left-box">
            <div class="null">null</div>
            <hr id="hr1">
            <div class="object-prototype">Object.Prototype</div>
                <hr id="hr2">
                 <hr id="hr3">
            <div class="flex-box1">
                <div class="obj-prototype">funcation Object</div>
                <div class="person-prototype">Person.Prototype</div>
            </div>
                <hr id="hr4">
                 <hr id="hr5">
            <div class="flex-box">
                <div class="person">funcation Person</div>
                <div class="person">person(new Person())</div>
            </div>
        </div>
        <div class="right-box-proto">
            <h2>prototype和_proto_</h2>
            <p>
                <div class="main">
                     简单来讲，prototype和_proto_都是原型,但两者又一些区别：<br>
                <li><el-tooltip placement="top" content="prototype表示该函数的原型，也表示一个类的成员的集合。"><b>prototype: 显式原型</b>
</el-tooltip>,只有（构造）函数才有prototype这个属性，这个属性中存放了原型中的各中方法和属性</li>
                <li><el-tooltip placement="top" content="__proto__  属性是一个访问器属性（一个getter函数和一个setter函数）, 暴露了通过它访问的对象的内部[[Prototype]] (一个对象或 null)。"><b>__ proto__: 隐式原型</b>
</el-tooltip> ，只有对象才拥有这个属性，这个属性用于连接每一级的对象<b>(注意prototype也是对象)</b>，形成原型链</li>
                <br>
                你可以把prototype看成一个<b>存放函数和属性的“仓库”</b>，而_proto_这个属性是<b>连接各个“仓库”的“路”</b>，当一个对象调用了一个自身没有的方法时，
                    这个对象就会沿着“路”去上层的“仓库”中寻找这个属性。直到在某一层中找到这个属性或者找完所有的仓库（找到null）
                </div>
            </p>
            <br>
            <br>
            <ol>右图中实线代表下层的.prototype指向上层,上层的<el-tooltip placement="top" content="构造函数（Constructor）在对象创建或者实例化时候被调用的方法。这里的constrcutor是一个指向构造函数的指针"><b>constrcutor</b>
</el-tooltip>指向下层</ol>
             <ol>虚线代表上下两层用_proto_连接，
    <el-tooltip placement="top" content="原型链是实现继承的主要方法。 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。 每个构造函数都有一个prototype属性，指向原型对象。 原型对象都包含一个指向构造函数的指针（constructor）">
<b>虚线连成的路线就是原型链</b> 
</el-tooltip></ol>
        </div>
         <div id="goto">点击查看更多></div>
    </div>
 </div>
</template>

<script>
import Animator from '../../animator/animator'
import anime from 'animejs'
export default {
name:'Proto',
mounted(){
    this.linking();
},
methods:{
    async linking(){
        let that=this;
        let beg=new Animator(1000,function(p){
            setTimeout(()=>{
                for(let i=1;i<6;i++){
            if(i%2==1){
                document.getElementById("hr"+i).style.width='60px'
            }else{
                document.getElementById("hr"+i).style.height='60px'
                }
            }
            },500)
        })
        let func=new Animator(800,function(p){
         document.getElementsByClassName("person")[1].style.opacity=1;
         document.getElementsByClassName("person")[1].style.width='300px';
        })
         let person=new Animator(800,function(p){
         document.getElementsByClassName("person")[0].style.opacity=1;
         document.getElementsByClassName("person")[0].style.width='200px';
        })
        let Person=new Animator(800,function(p){
         document.getElementsByClassName("person-prototype")[0].style.opacity=1;
        document.getElementsByClassName("person-prototype")[0].style.width='400px'
        })
        let obj=new Animator(800,function(p){
         document.getElementsByClassName("obj-prototype")[0].style.opacity=1;
        document.getElementsByClassName("obj-prototype")[0].style.width='200px'
        })
        let object=new Animator(800,function(p){
         document.getElementsByClassName("object-prototype")[0].style.opacity=1;
        document.getElementsByClassName("object-prototype")[0].style.width='400px'
        })
        let nullObj=new Animator(800,function(p){
         document.getElementsByClassName("null")[0].style.opacity=1;
            
        })
    await beg.animate();
    await func.animate();
    await person.animate();
    await Person.animate();
    await obj.animate();
    await object.animate();
    await nullObj.animate();
    document.getElementsByClassName("right-box-proto")[0].style.opacity=1;
    document.getElementById('to-center').addEventListener('click' ,()=>{
        that.$router.push('/Inherit')
    })
    }
}
}
</script>

<style lang="less" scoped>
#goto{
        position: absolute;
        transform: translate(-50%);
        left: 50%;
        top:700px;
           cursor:default;
        font-size: 18px;
        color:rgb(226, 222, 222)
    }
@beginwidth:60px;
.line{
    transition: 0.5s;
        height: 0px;
        width: 2px;
        border: none;
        transition: 0.5s;
        background-color: #6853da;
        opacity: 0.8;
}
.inline(){
 width: 0px;
transform: rotate(90deg);
  border:none;
  border-top:2px dotted #6853da;
  background-color: transparent;
}
hr{
    transition: 0.8s;
    position: absolute;
    .line();
    }
#hr1{
    top:150px;
    left: 230px;
    .inline();
}
#hr2{
    top:260px;
    left: 130px;
}
#hr3{
    top:290px;
    left: 370px;
    .inline();
}
#hr4{
    top:400px;
    left: 310px;
}
#hr5{
    top:430px;
    left: 480px;
    .inline();
}
.round{
    transition: 0.8s;
    opacity: 0;
    margin-top: 50px;
    margin-bottom: 30px;
       width: 80px;
        height:60px;
        background-color: #6853da;
        font-weight: bolder;
        color:white;
        text-align: center;
        line-height: 60px;
        border-radius: 100px;
    }
.to-center{
    width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left-box{
        position: relative;
        left: -30px;
        margin-top: 20px;
        width: 500px;
        .null{
        .round();
        margin-bottom: 80px;
        width: 120px;
        height: 60px;
        line-height: 60px;
        position: relative;
        left: 200px;
        }
        .object-prototype{
        .round();
        position: relative;
        left: 100px;
        width:@beginwidth;
        }
        .person-prototype{
        position: relative;
        left: 100px;
        .round();   
        width:@beginwidth;
        }
        .flex-box1{
            display: flex;
        .obj-prototype{
        position: relative;
        left: 20px;
            .round();
            width:@beginwidth;
        }
        }
        .flex-box{
        display: flex;
        position: relative;
        left: 150px;
        width: 600px;
        justify-content: space-between;
            .person{
                .round();
                width: @beginwidth;
            }
        }
     .flex-box :nth-child(1){
            width: @beginwidth;
        }
    }
    .right-box-proto{
        opacity: 0;
        transition: 0.8s;
        width: 520px;
        margin-top: 100px;
        b{
            color:#6853da
        }
        h2{
            color:#6853da;
            margin-bottom: 40px;
        }
                p{
        line-height: 40px;
        font-size: 18px;
        li{
        line-height: 30px;
        }
        div{
            line-height: 40px;
            }
        }
        ol{
        color: rgb(156, 156, 156);
        }
    }
}
</style>